class App extends React.Component {
  //状态数据池
  state = {
    username: "",
    password: "",
    intro: "",
    gender: "male",
    isStudent: true,
    hobbies: ["piano", "singing"],
    hobbiesData: [
      {
        name: "钢琴",
        value: "piano",
      },
      {
        name: "旅行",
        value: "travel",
      },
      {
        name: "跑步",
        value: "running",
      },
      {
        name: "唱歌",
        value: "singing",
      },
    ],
  };

  // handleUsername(e) {
  //   this.setState({
  //     username: e.target.value,
  //   });
  // }

  // handlePassword(e) {
  //   this.setState({
  //     password: e.target.value,
  //   });
  // }

  // handleIntro(e) {
  //   this.setState({
  //     intro: e.target.value,
  //   });
  // }

  handleSubmitClick(e) {
    e.preventDefault();
    // console.log(e);

    const { username, password, intro, gender, isStudent, hobbies } =
      this.state;

    console.log(username, password, intro, gender, isStudent, hobbies);
  }

  handleResetClick(e) {
    e.preventDefault();

    this.setState({
      username: "",
      password: "",
      intro: "",
      gender: "male",
      isStudent: true,
    });
  }

  handleChange(e) {
    this.setState({
      //[e.target.name] -> ['e.target.name'] -> username -> username = 用户输入内容
      //[e.target.name] -> ['e.target.name'] -> password -> password = 用户输入内容
      [e.target.name]: e.target.value,
    });
  }

  handleIsStudentChange(isStudent) {
    this.setState({
      isStudent,
    });
  }

  handleHobbiesChange(e) {
    if (e.target.checked) {
      //如果勾选添加到数组
      this.setState({
        hobbies: [...this.state.hobbies, e.target.value],
      });
    } else {
      //如果没有勾选从数组中剔除
      this.setState({
        hobbies: this.state.hobbies.filter((item) => item !== e.target.value),
      });
    }
  }

  render() {
    const {
      username,
      password,
      intro,
      gender,
      isStudent,
      hobbiesData,
      hobbies,
    } = this.state;

    return (
      <form>
        <div>
          用户名：
          <input
            type="text"
            placeholder="请输入用户名"
            value={username}
            name="username"
            onChange={this.handleChange.bind(this)}
          />
        </div>
        <div>
          密码：
          <input
            type="password"
            placeholder="请输入密码"
            value={password}
            name="password"
            onChange={this.handleChange.bind(this)}
          />
        </div>
        <textarea
          placeholder="请输入自我介绍"
          value={intro}
          name="intro"
          onChange={this.handleChange.bind(this)}
        ></textarea>
        <div>
          性别：
          <select
            name="gender"
            value={gender}
            onChange={this.handleChange.bind(this)}
          >
            <option value="male">男</option>
            <option value="female">女</option>
          </select>
        </div>
        <div>
          是否是学生：
          <input
            type="radio"
            name="isStudent"
            checked={isStudent}
            onChange={this.handleIsStudentChange.bind(this, true)}
          />
          是 |{" "}
          <input
            type="radio"
            name="isStudent"
            onChange={this.handleIsStudentChange.bind(this, false)}
          />
          不是
        </div>
        <p>
          {hobbiesData.map((item) => {
            return (
              <span key={item.value}>
                {item.name} :
                <input
                  type="checkbox"
                  name="hobbies"
                  value={item.value}
                  onChange={this.handleHobbiesChange.bind(this)}
                  checked={hobbies.includes(item.value)}
                />
                |
              </span>
            );
          })}
        </p>
        <button onClick={this.handleSubmitClick.bind(this)}>登录</button>
        <button onClick={this.handleResetClick.bind(this)}>重置</button>
      </form>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("app"));
